<template>
  <div>
      <div class="hotRankTitle">
          <p class="currentWeek">
              <i class="iconfont">&#xe6a0;</i>
              <span>本周热门榜单</span>
          </p>
          <div class="allRank">
              <span>全部榜单</span>
              <i class="iconfont">&#xe614;</i>
          </div>
      </div>
      <!-- 滑动组件 -->
      <div class="hotSlider">
          <swiper :options="options" :not-next-tick="options.notNextTick">
            <swiper-slide v-for="item of hotSlideList" :key="item.id">
                <div class="hotItem">
                    <img :src="item.imgUrl" alt="">
                    <p>{{item.desc}}</p>
                    <p><span>¥{{item.price}}</span>起</p>
                </div>
            </swiper-slide>
            <div class="swiper-pagination" v-if="options.pagination" slot="pagination"/>
          </swiper>
      </div>
  </div>
</template>
<script>
export default{
  name: 'HotRank',
  data () {
    return {
      options: {
        slidesPerView: 3.4,
        spaceBetween: 30,
        freeMode: true,
        pagination: {
          clickable: false
        }
      },
      hotSlideList: [{
        id: 1001,
        imgUrl: '//img1.qunarzz.com/sight/p0/201309/24/977fea7b3c5cd758c8d65eac.jpg_150x150_7d086c07.jpg',
        desc: '熊猫基地',
        price: 54
      }, {
        id: 1002,
        imgUrl: '//img1.qunarzz.com/sight/p0/201309/24/977fea7b3c5cd758c8d65eac.jpg_150x150_7d086c07.jpg',
        desc: '熊猫基地',
        price: 54
      }, {
        id: 1003,
        imgUrl: '//img1.qunarzz.com/sight/p0/201309/24/977fea7b3c5cd758c8d65eac.jpg_150x150_7d086c07.jpg',
        desc: '熊猫基地',
        price: 54
      }, {
        id: 1004,
        imgUrl: '//img1.qunarzz.com/sight/p0/201309/24/977fea7b3c5cd758c8d65eac.jpg_150x150_7d086c07.jpg',
        desc: '熊猫基地',
        price: 54
      }, {
        id: 1005,
        imgUrl: '//img1.qunarzz.com/sight/p0/201309/24/977fea7b3c5cd758c8d65eac.jpg_150x150_7d086c07.jpg',
        desc: '熊猫基地',
        price: 54
      }, {
        id: 1006,
        imgUrl: '//img1.qunarzz.com/sight/p0/201309/24/977fea7b3c5cd758c8d65eac.jpg_150x150_7d086c07.jpg',
        desc: '熊猫基地',
        price: 54
      }]
    }
  }
}
</script>
<style lang="scss" scoped>
    @import "~styles/layout.scss";
    .hotRankTitle{
        @include flex(row);
        justify-content: space-between;
        align-items: center;
        font-size: 24px;
        margin-top: 20px;
        background-color: #ffffff;
        padding: 15px 20px;
        .currentWeek{
            i{
                font-size: 26px;
                color:#f00;
            }
        }        .allRank{
            font-size: 22px;
            i{
                font-size: 22px;
            }
        }
    }
    .hotSlider{
        @include flex(row);
        justify-content: flex-start;
        align-items: flex-start;
        padding: 0 20px;
        background-color: #ffffff;
        .hotItem{
            margin-right: 10px;
            padding-bottom: 10px;
            img{
                width: 150px;
                height: 150px;
            }
            p{
                text-align: center;
                font-size: 20px;
                margin-top: 10px;
                span{
                    color:#f00
                }
            }
        }
    }
</style>
